﻿<!DOCTYPE html>
<html>
<head><script src="/static/jquery-3.4.1.min.js"></script></head>
<body>
    <center>
        新用户注册<hr>
        <table>
            <tr><td align="right"> 用户ID：</td>
                <td><input type="text" id="uid" maxlength="10">
                    <span id="ruid"></span>
                </td></tr>
            <tr><td align="right">密码：</td>
                <td><input type="password" id="pwd1" maxlength="8"></td></tr>
            <tr><td align="right">再次输入密码：</td>
                <td><input type="password" id="pwd2" maxlength="8"></td></tr>            
            <tr><td align="right">Email：</td>
                <td><input type="email" id="email" maxlength="20"></td></tr>
            <tr><td align="right">验证码：</td>
                <td><img src="/getpng/" id="icode" />单击刷新<br />
                    <input type="text" id="code" maxlength="10"></td></tr>
            <tr><td colspan="2" align="center"><input type="button" value="提交" id="submit" /></td></tr>
        </table>
        <hr><span id="result"></span>
    </center>
    <script>
        var codeok = false
        var idok = false
        $(document).ready(function () {
            $('input').keyup(function () {//在输入数据时，清除上次的验证信息
                $('#result').html('')    });
            $('#uid').keyup(function () {//在输入数据时，检查用户用户名是否可用
                var uid = $("#uid").val();
                $.get("/checkuid/", { 'uid': uid }, function (r) {
                    if (r == 'ID可用') { idok = true } else { idok = false }
                    $('#ruid').html(r)   })
            });
            $('#icode').click(function () {//单击时更改图片src，
                var a = (new Date()).toTimeString()
                $('#icode').attr('src', '/getpng/?t=' + a) //加上不同的参数，以便刷新图片
                codeok = false   });
            $('#code').blur(function () {//结束输入验证码时验证是否正确
                var code = $("#code").val();
                $.get("/checkcode/", {}, function (r) {
                    if (r.toLowerCase() == code.toLowerCase()) { codeok = true } else { codeok = false }
                })
            });
            $('#submit').click(function () {//单击提交按钮时，先检查数据，通过后提交服务器
                if (!idok) {
                    $('#result').html('<span style="color:red">你输入的用户ID已被占用！</span>')
                    return 1  }
                var pwd1 = $("#pwd1").val();
                var pwd2 = $("#pwd2").val();
                pwdok = false
                if (pwd1 != pwd2) {
                    $('#result').html('<span style="color:red">两次输入的密码不一致！</span>')
                    return 1}
                var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
                if (!reg.test($("#email").val())) {
                    $('#result').html('<span style="color:red">你输入的Email地址无效！</span>')
                    return 1}
                if (!codeok) {
                    $('#result').html('<span style="color:red">验证码输入错误！</span>')
                    return 1}
                var uid = $("#uid").val();
                var pwd = $("#pwd1").val();
                var email = $("#email").val();
                var data = { 'uid': uid, 'pwd': pwd, 'email': email }
                $.get("/addnew/", { 'uid': uid, 'pwd': pwd, 'email': email }, function (r) { $('#result').html(r) })
            });
        });
    </script>
</body>
</html>